<template>
  <div id="GetInformation" >
    <!-- <app-Header title="领取信息"></app-Header> -->
    <group labelAlign="right" labelWidth="70px" labelMarginRight="5px">
      <x-input title="姓名" placeholder="请输入姓名" required="required" v-model="Name"></x-input>
      <x-input title="手机号" placeholder="请输入手机号码" v-model="inputphone" is-type="china-mobile" ref="input01"></x-input>
      <x-address title="所在地区" placeholder="请选择所在地区" :list="ChinaAddressData" value-text-align="left" v-model="Address"></x-address>
      <div class="vux-x-input weui-cell">
        <div class="weui-cell__hd"><!---->
          <label class="weui-label" style="width: 70px; text-align: right; margin-right: 5px;">详细地址</label>
        </div>
        <div class="weui-cell__bd weui-cell__primary">
          <input  autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" type="text" placeholder="请填写街道、小区门牌号等" v-model='DetAddress' class="weui-input">
        </div>
      </div>
    </group>
    <div>
      <alert v-model="alert" >{{title}}</alert>
    </div>
    <box gap="20px 20px">
      <x-button type="primary" action-type="button" @click.native="Validform">提交</x-button>
    </box>
    <App-Mask :mask="mask"></App-Mask>
  </div>

</template>

<script>
import AppMask from '../../components/mask/Mask'
import Box from 'vux/src/components/box'
import XInput from 'vux/src/components/x-input'
import XButton from 'vux/src/components/x-button'
import Alert from 'vux/src/components/alert'
import Group from 'vux/src/components/group'
import Selector from 'vux/src/components/selector'
import Datetime from 'vux/src/components/datetime'
import XAddress from 'vux/src/components/x-address'
import {ChinaAddressV3Data} from 'vux'

export default {
  name: 'GetInformation',
  components: {
    Box,
    Alert,
    XInput,
    XButton,
    Group,
    Selector,
    Datetime,
    XAddress,
    ChinaAddressV3Data,
    // AppHeader,
    AppMask
  },
  data () {
    return {
       // new Date().toLocaleDateString().replace('/', '-').replace('/', '-')
      // isShow: false,
      alert: false,
      title: '',
      inputphone: '',
      Name: '',
      Address: [],
      DetAddress: '',
      ChinaAddressData: ChinaAddressV3Data,
      data: {},
      mask: {
        'isShow1': false,
        'isShow2': false,
        'isShow3': false
      }
    }
  },
  methods: {
    // 个人收货地址保存
    Validform () {
      // console.log(1)
      this.valid1 = this.$refs.input01.valid
      this.data = JSON.parse(localStorage.product)
      // console.log(this.data.data.id)
      if (this.Name !== '' && this.Address.length === 3 && this.DetAddress !== '' && this.inputphone !== '' && this.valid1 === true) {
        console.log(1)

        this.$axios.post(this.apidomain + '/api/giftCert/updateCustGoodsAlreadyGet/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          id: this.data.data.id,
          consigneeName: this.Name,
          consigneeMobile: this.inputphone,
          detailAddress: this.DetAddress,
          province: this.Address[0] || '',
          city: this.Address[1] || '',
          district: this.Address[2] || ''
        })
        .then((response) => {
          // console.log(response.data)
          if (response.data.errorCode === '0') {
            this.mask.isShow3 = true
          }
        })
        .catch((error) => {
          console.log(error)
        })
        // this.mask.isShow3 = true
      } else {
        this.alert = true
        this.title = '请完善您的个人信息'
      }
    }
  },
  watch: {
    Name: function (newVal, oldVal) {
      if (newVal !== '' && oldVal !== '' && newVal !== oldVal) {
        // console.log('new：%s，old：%s，b：%s，s：%s，w：%s，q：%s，a：%s，', newVal, oldVal, this.$data.Birthday, this.$data.Sex, this.$data.WeChatNo, this.$data.QQNo, this.$data.Address)
      }
    }
  },
  mounted () {
    if (/Android [4-8]/.test(navigator.appVersion)) {
      window.addEventListener('resize', function () {
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          window.setTimeout(function () {
            document.activeElement.scrollIntoViewIfNeeded()
          }, 0)
        }
      })
    }
  }
}
</script>
<style lang="less">
  @import "../../assets/less/getinformation/getinformation.less";
</style>
